<template>
  <el-dialog v-model="showModel" width="1200px" title="链接选择器" @open="handleOpen" top="10vh" :close-on-click-modal="false">
    <el-tabs v-model="activeTab" @tab-click="clickTab">
      <el-tab-pane label="营销活动" name="activity" lazy v-if="!disableTab.includes('activity')">
        <activity-href :model-value="modelValue" @click="(item) => dispatch('activity', item)"></activity-href>
      </el-tab-pane>
      <el-tab-pane label="商城商品" name="mallProduct" lazy v-if="!disableTab.includes('mallProduct')">
        <mall-product-href :model-value="modelValue" @click="(item) => dispatch('mallProduct', item)"></mall-product-href>
      </el-tab-pane>
      <el-tab-pane label="中间页面" name="middlePage" lazy v-if="!disableTab.includes('middlePage')">
        <middle-page-href :model-value="modelValue" @click="(item) => dispatch('middlePage', item)"></middle-page-href>
      </el-tab-pane>
      <el-tab-pane label="商城页面" name="mallPage" lazy v-if="!disableTab.includes('mallPage')">
        <mall-page-href :model-value="modelValue" @click="(item) => dispatch('mallPage', item)"></mall-page-href>
      </el-tab-pane>
      <el-tab-pane label="系统页面" name="systemManage" lazy v-if="!disableTab.includes('systemManage')">
        <system-page-href :model-value="modelValue" @click="(item) => dispatch('systemManage', item)"></system-page-href>
      </el-tab-pane>
      <el-tab-pane label="其他页面" name="other" lazy v-if="!disableTab.includes('other')">
        <other-page-href :model-value="modelValue"></other-page-href>
      </el-tab-pane>
      <el-tab-pane label="手动输入" name="manual" lazy v-if="!disableTab.includes('manual')">
        <manual-href :model-value="modelValue" @done="(value) => dispatch('manual', value)"></manual-href>
      </el-tab-pane>
    </el-tabs>

    <div class="selected-link" v-if="links.length">
      相关链接：
      <div v-for="item in links" class="link" >
        <template v-if="item.url">
          <span>{{item.urlName}}：</span>
          <el-popover
              placement="top-start"
              :width="200"
              trigger="hover"
              :content="item.url"
          >
            <template #reference>
              <span class="link-content" style="cursor: pointer; margin-right: 20px" @click="handleCopy(item.url)">{{item.url}}</span>
            </template>
          </el-popover>
          <el-button @click="confirm(item)" type="primary">确定</el-button>
        </template>
      </div>
    </div>

    <div class="selected-link flex-center" v-else>
      请选择链接
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {Ref, WritableComputedRef} from "vue";
import {TabsPaneContext} from "element-plus";
import OtherPageHref from "@/components/hrefSelector/compos/OtherPageHref.vue";
import {IGoodsPageRow, IMallPageListRow} from "@/api/modules/pointsMall";
import {ILink, LinkType, type} from "@/components/hrefSelector/types";



const props = withDefaults(defineProps<{
  show: boolean,
  modelValue: ILink,
  disableTab?: string[],
}>(), {
  disableTab: () => []
})
const emits = defineEmits<{
  (e: "update:show", value: boolean): void;
  (e: "confirm", value: ILink): void;
}>()

const store = useStore()

const showModel:WritableComputedRef<boolean> = computed({
  get() {
    return props.show
  },
  set(newValue) {
    emits("update:show", newValue)
  }
});

const activeTab = ref("activity")
const clickTab = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
  links.value = [];
}

const dispatch = (type: type, payload: any) => {
  // ...
  links.value = [];

  switch(type) {
    case "activity": activityHrefGenerator(payload);break;
    case "mallProduct": mallProductHrefGenerator(payload);break;
    case "middlePage": middlePageHrefGenerator(payload);break;
    case "mallPage": mallPageHrefGenerator(payload);break;
    case "systemManage": systemManageHrefGenerator(payload);break;
    case "other": otherHrefGenerator(payload);break;
    case "manual": manualHrefGenerator(payload);break;
    default: console.log("未知事件类型");
  }
}

const links:Ref<ILink[]> = ref([]);

const activityHrefGenerator = (item:any) => {
  links.value.push(makeLink(item.name, item.actLink, "activity", "href"));
  links.value.push(makeLink(item.name, item.canonicalActLink, "activity", "href"));
}

const mallProductHrefGenerator = (item: IGoodsPageRow) => {
  const mallInfo = computed(() => store.state.storeEdit.mallInfo);
  const url = `/mall/${mallInfo.value.mallCode}/app/detail?goodsId=${item.id}&originalType=mall`;
  links.value.push(makeLink(item.name, url, "mallProduct", "routerPath"));
}

const middlePageHrefGenerator = (item: any) => {
  links.value.push(makeLink(item.name, item.pageLink, "middlePage","href"));
  links.value.push(makeLink(item.name, item.canonicalPageLink, "middlePage","href"));
}

const mallPageHrefGenerator = (item: IMallPageListRow) => {
  links.value.push(makeLink(item.name, item.pageLink, "mallPage", "href"))
  links.value.push(makeLink(item.name, item.canonicalPageLink, "mallPage","href"));
}

const systemManageHrefGenerator = (item: {name: string, routerName: string}) => {
  links.value.push(makeLink(item.name, item.routerName, "systemManage", "routerName"));
}

const otherHrefGenerator = (item: any) => {

}

const manualHrefGenerator = (value: string) => {
  links.value.push(makeLink("手动输入的地址，" + value, value, "manual", "href"));
}

const makeLink: (urlName: string, url: string, urlType: type, linkType: LinkType) => ILink = (urlName = "链接", url = "无", urlType, linkType) => {
  return {
    urlName,
    url,
    urlType,
    linkType,
  }
}

const handleCopy = (value: string) => {
  ElMessage.success("已复制")
  navigator.clipboard.writeText(value);
}

const handleOpen = () => {
  debugger
  if (props.modelValue) {
    if (props.modelValue.urlType) {
      activeTab.value = props.modelValue.urlType;
    }
  }
}

const confirm = (item: ILink) => {
  emits("confirm", item);
  showModel.value = false;
}

const cancel = () => {

}
</script>

<style scoped lang="scss">
.selected-link {
  height: 110px;
}

.link:not(:last-child) {
  margin-bottom: 10px;
}

.link {
  display: flex;
  align-items: center;
}

.link-content {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
